'use client'

import Link from 'next/link'
import { useCart } from './components/CartContext'
import toast from 'react-hot-toast'

// 特色菜品数据
const featuredItems = [
  {
    id: 101,
    name: '招牌红烧肉',
    price: 88,
    description: '精选五花肉，红烧入味，肥而不腻，入口即化',
    image: '/images/featured/hongshaorou.jpg',
    category: '热菜'
  },
  {
    id: 102,
    name: '清蒸大闸蟹',
    price: 128,
    description: '阳澄湖大闸蟹，清蒸保持原汁原味，蟹黄饱满',
    image: '/images/featured/dazhaxie.jpg',
    category: '热菜'
  },
  {
    id: 103,
    name: '松茸炖鸡汤',
    price: 98,
    description: '精选松茸，配以老母鸡，文火慢炖，滋补养生',
    image: '/images/featured/songrongtang.jpg',
    category: '汤类'
  }
]

export default function Home() {
  const { addItem } = useCart()

  const handleAddToCart = (item: typeof featuredItems[0]) => {
    addItem({
      id: item.id,
      name: item.name,
      price: item.price
    })
    toast.success(`已添加 ${item.name} 到购物车`)
  }

  return (
    <div className="min-h-screen">
      {/* 导航栏 */}
      <nav className="bg-white shadow-lg">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <h1 className="text-2xl font-bold text-primary">美味餐厅</h1>
            </div>
            <div className="flex items-center space-x-4">
              <Link href="/menu" className="text-gray-700 hover:text-primary">
                菜单
              </Link>
              <Link href="/cart" className="text-gray-700 hover:text-primary">
                购物车
              </Link>
              <Link href="/orders" className="text-gray-700 hover:text-primary">
                我的订单
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* 主要内容 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center">
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            欢迎来到美味餐厅
          </h2>
          <p className="text-xl text-gray-600 mb-8">
            享受美食，品味生活
          </p>
          <Link
            href="/menu"
            className="inline-block bg-primary text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-opacity-90 transition-colors"
          >
            开始点餐
          </Link>
        </div>

        {/* 特色菜品展示 */}
        <div className="mt-16">
          <h3 className="text-2xl font-bold text-gray-900 mb-8 text-center">特色菜品</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {featuredItems.map((item) => (
              <div key={item.id} className="bg-white rounded-lg shadow-md overflow-hidden">
                <div className="relative h-48 bg-gray-200">
                  {/* 暂时使用占位背景，后续替换为真实图片 */}
                  <div className="absolute inset-0 flex items-center justify-center text-gray-400">
                    菜品图片
                  </div>
                </div>
                <div className="p-4">
                  <h3 className="text-lg font-semibold text-gray-900">{item.name}</h3>
                  <p className="mt-2 text-gray-600 text-sm">
                    {item.description}
                  </p>
                  <div className="mt-4 flex justify-between items-center">
                    <span className="text-primary font-bold">¥{item.price}</span>
                    <button 
                      className="bg-primary text-white px-4 py-2 rounded hover:bg-opacity-90 transition-colors"
                      onClick={() => handleAddToCart(item)}
                    >
                      加入购物车
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
} 